<!-- src/components/TabBar.vue -->
<template>
  <div class="tabbar" ref="tabbar">
    <!-- 首页 -->
    <router-link to="/" class="tab-item" active-class="active">
      <span>首页</span>
    </router-link>

    <!-- 关注 -->
    <router-link to="/follow" class="tab-item" active-class="active">
      <span>关注</span>
    </router-link>

    <!-- 中间加号按钮 -->
    <router-link to="/release" class="tab-item center">
      <span>+</span>
    </router-link>

    <!-- 消息 -->
    <router-link to="/message" class="tab-item " :class="{ 'message-tab': showMessageBadge }" active-class="active">
      <span>消息</span>
    </router-link>

    <!-- 我 -->
    <router-link to="/my" class="tab-item" active-class="active">
      <span>我</span>
    </router-link>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useInteractionStore } from '@/stores/interaction'

const interactionStore = useInteractionStore()
// 是否显示消息小红点
const showMessageBadge = computed(() => interactionStore.commentCount > 0 || interactionStore.followerCount > 0 || interactionStore.likeCount > 0 || interactionStore.atCommentCount > 0)
</script>

<style scoped lang="scss">
.tabbar {
  @include flex-around;
  height: 50px;
  background-color: $secondary-color;
  color: $text-color;
  font-size: $font-size-base;
  @include fixed-bottom;


  .tab-item {
    @include flex-center;
    flex-direction: column;
    padding: 8px 0;
    color: inherit;

    &.message-tab {
      position: relative;

      // 来消息的小红点
      &::before {
        content: '';
        position: absolute;
        top: 4px;
        right: -4px;
        width: 8px;
        height: 8px;
        background-color: $red-color;
        border-radius: 50%;
      }
    }

    &:hover {
      color: $white-color;
    }

    &.active {
      color: $white-color;
      position: relative;

      // 下划线效果
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background-color: $white-color;
        border-radius: 1px;
      }
    }

    // 中间按钮样式（突出）
    &.center {
      width: 45px;
      height: 35px;
      position: relative;
      border-radius: $border-radius-sm;
      background-color: $white-color;
      color: $black-color;
      padding: 0;

      span {
        line-height: 50px;
      }
    }
  }


}
</style>